<template>
  <div class="leftBottom">
    <TITLESS cnt="报警响应统计"> </TITLESS>
    <Echart
      :options="chartOptions"
      height="100%"
    ></Echart>
  </div>
</template>

<script setup>
import {watch, ref} from 'vue';
import TITLESS from "@/components/TITLESS.vue";
import Echart from "@/components/echart/index.vue";

const props = defineProps({
  warnResponse: {
      type: Object,
      default: ()=> { return {
        responseCount: 0,
        noResponseCount: 0,
        total: 0
      }}
    },
});
let dataObj = {}
  watch(()=> props.warnResponse, (curr) => {
    dataObj = curr
    getDevices()
  },{deep: true})

let list = []
let maxIndex = 0
let maxData = 0

function getDevices() {
    list = [
      {
        name: "已响应",
        value: dataObj.responseCount,
        itemStyle: {
          normal: {
            color: '#2B8EF3'
          },
        },
      },
      {
        name: "待响应",
        value: dataObj.noResponseCount,
        itemStyle: {
          normal: {
            color: '#FFD770'
          },
        },
      },
    ];
    list.forEach((e, i) => {
      if (e.value >= maxData) {
        maxIndex = i;
        maxData = e.value;
      }
    });
    initChart();
}
let chartOptions = ref()
function initChart() {
      chartOptions.value = {
        backgroundColor: "transparent",
        legend: {
          orient: "vertical",
          top: "center",
          right: 20,
          itemGap: 20,
          textStyle: {
            color: "rgba(209, 234, 255, 1)",
            fontSize: 16,
            fontWeight: 400,
            fontFamily: "Arial",
          },
          formatter: function (name) {
            const item = list.find((i) => {
              return i.name === name;
            });
            let sum = dataObj.total;
            let val = item.value || 0;
            const p = val ? ((item.value / sum) * 100).toFixed(1) : 0;
            return `${name}  ${p}%  (${val}) `;
          },
        },
        tooltip: {
          trigger: "item",
          backgroundColor: "#044c73",
          borderColor: "#044c73",
          textStyle: {
            color: "#fff",
          },
          formatter: function (params) {
            const item = list.find((i) => {
              return i.name === params.data.name;
            });
            let val = item.value || 0;
            return `${params.data.name}：${val}`;
          },
        },
        series: [
          // 最外层圆
          {
            type: "pie",
            radius: ["55%", "45%"],
            center: ["25%", "50%"],
            hoverAnimation: false,
            data: [
              {
                value: dataObj.responseCount,
                // value: 46,
                name: "已响应",
                itemStyle: {
                  normal: {
                    color: '#2B8EF3'
                  },
                },
              },
            ],
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
          },
          // 内层圆
          {
            type: "pie",
            radius: ["63%", "38%"],
            center: ["25%", "50%"],
            hoverAnimation: false,
            z: 50,
            data: [
              {
                value: dataObj.responseCount,
                name: "已响应",
                itemStyle: {
                  normal: {
                    // color: "#FFD770",
                    color: "transparent",
                  },
                },
              },
              {
                value: dataObj.noResponseCount,
                name: "待响应",
                itemStyle: {
                  normal: {
                    color: '#FFD770'
                  },
                },
              },
            ],
            label: {
              normal: {
                // normal 是图形在默认状态下的样式
                show: true,
                position: "center",
                color: "#D1EAFF",
                fontSize: 20,
                fontWeight: "500",
                formatter: `{t|${dataObj.total}}\n{n|总数}`,
                rich: {
                  t: {
                    color: "#D1EAFF",
                    fontSize: 36,
                    lineHeight: 53,
                  },
                  n: {
                    color: "#D1EAFF",
                    fontSize: 18,
                  },
                },
              },
              emphasis: {
                show: true,
                color: "#D1EAFF",
                fontSize: 20,
                fontWeight: "500",
                formatter: function (e) {
                  if (e.dataIndex == maxIndex) {
                    return `{t|${dataObj.total}}\n{n|总数}`;
                  } else {
                    return "";
                  }
                },
                rich: {
                  t: {
                    color: "#D1EAFF",
                    fontSize: 36,
                    lineHeight: 53,
                  },
                  n: {
                    color: "#D1EAFF",
                    fontSize: 18,
                  },
                },
              },
            },
          },
        ],
      };
    }
</script>

<style lang="scss" scoped>
.el-dropdown-link {
  cursor: pointer;
  color: #60aff8;
  border: none;
  align-items: center;
  padding: 0;
  margin-right: 10px;
  font-style: normal;
  font-size: 16px;
  font-weight: 600;
}
.leftBottom {
  width: 100%;
  // height: 100%;
  height: calc(100% - 45px);

  box-sizing: border-box;
  position: relative;
  color: #b5bcc2;
  font-size: 16px;
  .top {
    width: 100%;
    display: flex;
    position: absolute;
    justify-content: space-around;
    top: 75px;
    left: 0;
    z-index: 1;
    color: #fff;
    .topL {
      display: flex;
      font-size: 18px;
      &::before {
        content: "";
        width: 15px;
        height: 100%;
        margin-right: 8px;
        background: #1cc9e0;
      }
    }
    .topR {
      display: flex;
      font-size: 18px;

      &::before {
        content: "";
        width: 15px;
        height: 100%;
        margin-right: 8px;
        background: #bb2025;
      }
    }
  }
  .bottom {
    width: 100%;
    display: flex;
    position: absolute;
    justify-content: space-around;
    color: #fff;

    bottom: 20px;
    left: 0;

    z-index: 1;
    .btmL {
      display: flex;
      font-size: 18px;

      &::before {
        content: "";
        width: 15px;
        height: 100%;
        margin-right: 8px;
        background: #97a1ac;
      }
    }
    .btmR {
      display: flex;
      font-size: 18px;

      &::before {
        content: "";
        width: 15px;
        height: 100%;
        margin-right: 8px;
        background: #ffd037;
      }
    }
  }
}
</style>